*{

    margin: 0;
    padding: 0;
    font-family: consolas;
}
body {
    background-color: #0f1423;
}

.scrollPath{
    position: relative;
    margin: 400px auto;
    height: 15px;
    width: 25%;
    background-color: rgba(255,255,255,.5);
    border-radius: 2% / 50%;
}

.progerss{
    height: 100%;
    width: 0;
    border-radius: 8px / 7.5px;
    background: linear-gradient(to top,#008aff,#00ffe7);
    animation: ani 5s linear infinite;
}
@keyframes ani {
    0%,100%{
        filter: hue-rotate(0deg);
    }
    50%{
        filter: hue-rotate(360deg);
    }
}
.progerssbar{
    position: absolute;
    top : -3px;
    left: 0;
    transform: translateX(-10px);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid gray;
    background: linear-gradient(to top,#008aff,#00ffe7);
    animation: ani 5s linear infinite;
    cursor: pointer;

}

